<template>
  <div class="cms-views-container member-cms-pages" :class="type === 4 ? 'bg-[#F6F8FB]' : 'bg-[#222]'">
    <div v-if="type !== 4">
      <header class="h-10 text-base font-medium leading-10 text-center text-white">会员专区</header>
      <div class="h-20 mx-4 mt-4" :class="type === 3 ? 'member-renewal-contain' : 'member-login-content'">
        <div class="relative flex items-center justify-between h-full px-3">
          <span class="flex items-center">
            <img
              :src="
                type === 1
                  ? mineIcons.avtar
                  : 'https://img2.baidu.com/it/u=939903330,3137313886&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=384'
              "
              alt=""
              class="w-10 h-10"
              style="border-radius: 50%"
            />
            <span class="pl-2">
              <h3 class="mb-0 text-base" :class="type === 3 ? 'text-black' : 'text-white'">
                {{ type !== 1 ? '花花' : '点击登录' }} <span v-if="type === 3">图标</span>
              </h3>
              <span class="text-xs" :class="type === 3 ? 'text-black' : 'text-[#C2C1C0]'">{{
                type !== 3 ? '开通vip会员免费观看所有视频' : '会员有效期至：2022-12-20'
              }}</span>
            </span>
          </span>
          <button class="text-sm text-[#F2D795] px-4 h-8 rounded-2xl border-0">
            {{ type === 3 ? '立即续费' : '开通会员' }}
          </button>
        </div>
      </div>
      <div class="pt-3 pb-4 pl-3 mx-4 my-4 set-meal">
        <span class="py-4 text-base font-medium leading-6 text-white">会员购买</span>
        <div class="set-meal-box">
          <div class="relative set-meal-type" v-for="(item, index) in setMeal" :key="index">
            <img src="../assets/mine/card_bg.png" alt="" class="w-[140px] h-full absolute top-0 right-0" />
            <div class="absolute top-0 left-0 content" :class="{ choice: item.choice }">
              <p class="text-base font-medium text-black">{{ item.title }}</p>
              <p class="text-xs text-[#8f9299] mb-1">{{ item.des }}</p>
              <div class="money">
                <span class="text-base">￥</span>
                <span class="text-2xl">{{ item.price }}</span>
                <span class="symbol-unused">￥{{ item.origin_price }}</span>
              </div>
            </div>

            <div class="pay-btn absolute bottom-3 left-[26px]">立即购买</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <header class="h-10 text-[#48494D] text-base font-medium text-center relative leading-10 bg-white">
        <span class="absolute left-4">图标</span>
        <span>支付</span>
      </header>
      <div class="mt-4 member-pay-containe h-[88px] mx-4 rounded-lg flex justify-center flex-col pl-4">
        <h3 class="text-base text-black">VIP月卡</h3>
        <span class="text-[#AD810D]"
          ><label class="text-xs">￥</label><span class="text-2xl font-medium">10</span>
        </span>
      </div>
      <p class="text-xs text-[#48494D] mt-3 mb-5 px-4">可以支付1000金币直接兑换</p>
      <div class="flex items-center justify-between px-4">
        <button class="w-[163px] h-[42px] rounded icon-change-btn">
          <dollar-circle-outlined class="coin-icon" />
          金币兑换
        </button>
        <button class="buy-now-btn w-[163px] h-[42px] rounded border-0 text-sm text-[#292423] font-medium">
          立即购买
        </button>
      </div>
    </div>

    <CmsBottomBar active="member" bgColor v-if="type !== 4" />
  </div>
</template>

<script setup lang="ts">
import { DollarCircleOutlined } from '@ant-design/icons-vue'
import CmsComponents from '@cms/components'
import { withDefaults } from 'vue'
import mineIcons from '../assets/mine'
const { CmsVipPay, CmsBottomBar } = CmsComponents
withDefaults(defineProps<{ type: number }>(), { type: 1 })
const setMeal = [
  {
    title: 'VIP月卡',
    des: '半价优惠',
    price: 10,
    origin_price: 20,
    choice: true
  },
  {
    title: 'VIP季卡',
    des: '4.5折优惠',
    price: 27,
    origin_price: 60,
    choice: false
  },
  {
    title: 'VIP半年卡',
    des: '4折优惠',
    price: 48,
    origin_price: 120,
    choice: false
  },
  {
    title: 'VIP年卡',
    des: '3.5折优惠',
    price: 84,
    origin_price: 240,
    choice: false
  }
]
</script>

<style scoped lang="less">
@import '../styles/vars.less';

.member-cms-pages {
  .member-login-content {
    border: 1px solid #fff;
    @apply rounded-lg mt-4;
    background-image: linear-gradient(135deg, #414040 0%, #9a958f 100%);
    button {
      background-image: linear-gradient(135deg, #4b433c 0%, #232121 100%);
    }
  }

  .member-renewal-contain {
    @apply rounded-lg mt-4;
    background: url('../assets/mine/member-login.png') no-repeat;
    button {
      background-image: linear-gradient(134deg, #4b433c 0%, #232121 100%);
    }
  }
  .member-pay-containe {
    background-image: linear-gradient(180deg, rgba(255, 252, 237, 0.09) 0%, rgba(255, 205, 82, 0.36) 100%);
    border: 1px solid #f7ca70;
  }

  .set-meal {
    background: #353535;
  }
  .money {
    margin-top: 12px;
    color: #ff613f;
    .symbol-unused {
      color: #8f9299;
      letter-spacing: 0;
      font-weight: 400;
      text-decoration: solid;
      text-decoration-line: line-through;
      @apply text-xs ml-2;
    }
  }
  .content {
    height: 107px;
    padding: 12px;
  }
  .set-meal-box {
    @apply flex flex-wrap gap-x-3 gap-y-4 mt-4;
  }
  .set-meal-type {
    width: 153px;
    height: 159px;
    @apply bg-white rounded-lg relative;
  }

  .pay-btn {
    background-image: linear-gradient(90deg, #ffeba7 0%, #f7ca70 100%);
    border-radius: 28px;
    color: #292423;
    @apply w-24 h-7 text-center text-xs font-medium absolute bottom-3 left-7;
    line-height: 28px;
  }
  .icon-change-btn {
    @apply bg-white;
    font-size: 14px;
    font-weight: 500;
    color: @cms-views-primary-color;
    border: 1px solid #ac8b41;
  }
  .buy-now-btn {
    background: linear-gradient(90deg, #f3e0a1 0%, #f7ca70 100%);
  }
}
</style>
